<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
    <HEAD>
        <TITLE>New Document </TITLE>
        <META NAME="Generator" CONTENT="EditPlus">
        <META NAME="Author" CONTENT="">
        <META NAME="Keywords" CONTENT="">
        <META NAME="Description" CONTENT="">
    </HEAD>
    <BODY>
        <div id="memebadge">
            thememe
        </div>
        <script type="text/javascript" charset="utf-8">
            
            // 1. Finds out the meme name   
            var memediv = document.getElementById('memebadge');
            var memename = memediv.innerHTML;
            
            // 2. Styles the box and tell the user it is loading  
            memediv.setAttribute('style', "width:180px; height: 68px; padding: 2px; background-color: #fff; border: 1px solid #ccc; font-family: sans-serif; font-size: 12px");
            memediv.innerHTML = "Loading...";
            
            // 3. Concatenates the meme name into the YQL call  
            var yqlurl = "http://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20meme.info%20WHERE%20name%3D%22" + memename + "%22%0A&format=json&callback=bb";
            
            // 4. Creates the script tag that will execute the YQL call and appends it to the HEAD  
            //  this causes it to be executed  
            var x = document.createElement('script')
            x.src = yqlurl
            document.getElementsByTagName('head')[0].appendChild(x);
            
            // 5. Declares the callback function that the YQL query will call when it loads  
            // this was specified in the YQL console http://developer.yahoo.com/yql/console  
            function bb(data){ // bb means Build Badge  
                // a. The results from YQL end up in here through the 'data' parameter.  
                // For brevity sake we attribute it to m  
                var m = data.query.results.meme;
                
                // b. Injects the variables into the HTML template that will go into the badge div  
                memediv.innerHTML = "<img src='" + m.avatar_url + "' style='float:left; width: 64px; height: 64px; margin-right: 4px;'><a href='" + m.url + "' target='_blank' alt='Follow me!' style='font-size:14px; font-weight: bold; text-decoration: none'>" + m.title + "</a><br> <span style='font-weight: bold; font-size: 20px; line-height: 40px;'>" + m.followers + "</span> followers</a>";
            }
        </script>
    </BODY>
</HTML>
